<!--  -->
<template>
  <div class='sachertorte-page' :class="className">
    <div v-html="css"></div>
    <div class="handpick" v-if="recommandList.length > 0">
      <div class="handpick-title flex-a-c flex-j-sb">
        <h3>{{datas.title}}</h3>
        <p @click.stop="classifyNav">{{datas.small_title}}<span class="iconfont icon-icon_more11"></span></p>
      </div>
      <div class="handpick-list" v-for="(item, index) in recommandList" :key="index" @click="toBand(item)">
        <div class="top">
          <img :src="item.logo" alt="" class="usetPhoto" />
          <div class="top_right">
            <div class="bandName">{{ item.name }}</div>
            <div class="localDetail" v-if="item.has_one_store">
              <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images%2Fsachertorte%2Flocal%20(1)%402x.png" alt="" />
              <span class="detail">{{ item.has_one_store.address }}</span>
              <div class="distance">{{ setDistance(item.has_one_store.distance) }}</div>
            </div>
          </div>
        </div>
        <div class="bandShop">
          <div class="lis" v-for="kitem in item.has_many_goods" :key="kitem.id" @click.stop="goodsNav(kitem.id)">
            <img :src="kitem.thumb" alt="" />
            <div class="shopName">{{ kitem.title }}</div>
            <div class="price">￥{{ kitem.price }}</div>
          </div>
        </div>
      </div>
    </div>
    
    <van-empty description="空空如也" v-else-if="goodsFlag && recommandList.length === 0" />
    <van-empty description="加载中" v-else />
    <div class="loadMore" v-if="isLoadMore" @click="getMoreData">加载更多</div>
    <div class="loadMore" v-if="page >= total_page">{{ $i18n.t("没有更多了") }}~~</div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
const css = function() {
  if (this.datas.preview_color) {
    // 确保数据已传入
    let datas = this.plugin_active && this.openTemplate == 1 ? this.datas_style02 : this.datas;
    const { preview_color, title_color, small_title_color} = datas;
    return `
        .component-${this.id} .handpick {
            background: ${preview_color};
        }
        .component-${this.id} .handpick .handpick-title h3{
            color:${title_color}
        }
        .component-${this.id} .handpick .handpick-title p{
            color:${small_title_color}
        }
    `;
  }
};
export default {
  name:'',
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: ["id","page_id", "datas","lastIndex","index","component_key","isBottom","tabcontrol", "isLast"],
  data() {
  return {
    arrIndex: 1, //组件加载下一页
    per_page:15, //每页多少条数据
    isLoadMore: false,
    goodsFlag:false,
    isLoadMoreSet:false,
    allLoaded: false, //全部数据加载完成
    total_page:0,
    locationMore:true,
    presentTime: "",
    page:1,
    point: {},
    city:'',
    cakeUnList:[],
    recommandList:[]
  };
  },
  //监听属性 类似于data概念
  computed: {
    css() {
      return "<style>" + css.call(this) + "</style>";
    },
    className() {
      const name = ["component-wrapper", `component-${this.id}`];
      return name;
    },
  },
  //监控data中的数据变化
  watch: {
    isBottom: function(newVal, oldVal) {
      if (this.tabcontrol) {
        // 选项卡this.isLast判断商品列表是最后一个组件
        if (newVal && this.isLast && this.isLoadMore) {
          this.getMoreData();
        }
      }
      // this.lastIndex == this.index判断商品列表是最后一个组件
      if (newVal && this.lastIndex == this.index && this.isLoadMore) {
        this.getMoreData();
      }
    }
  },
  //方法集合
  methods: {
    classifyNav() {
      this.$router.push(this.fun.getUrl("sachertorteBand", {}, {city: this.city}));
    },
    toBand(item){
      this.$router.push(this.fun.getUrl("sachertorteBandShop", {brand_id:item.id}, {city:this.city}));
    },
    goodsNav(id) {
      this.$router.push(this.fun.getUrl("sachertorteGoods", {}, { id: id, city: this.city }));
    },
    setDistance(distance) {
      if (distance >= 1000) {
        return Number(distance / 1000).toFixed(2) + 'Km'
      } else {
        return distance + 'm'
      }
    },
    frontendIndex(isLocation) {
      let json = {
        page:this.page,
        city:this.city,
        lng:this.point.lng,
        lat:this.point.lat,
        decorate_id: this.page_id || this.$store.state.temp.item.id,
        component_id: this.id,
        component_key: 'U_yzSupplyCake',
      }
      this.goodsFlag = false;
      $http
        .post(
          "home-page.get-decorate-page",
          json,'loading')
        .then((response)=> {
          this.isLoadMore = true;
          if (response.result === 1) {
            let res = response.data;
            let list = res?.data;
            this.recommandList = [].slice.call(list) || [];//后端返回的类型是数组对象需要转化
            this.total_page = res?.last_page;
            if(this.page >= this.total_page) {
              this.isLoadMore = false;
            }
            this.goodsFlag = true;
            if(this.datas.get_style == "1") { //装修自动获取
              if(this.recommandList.length > this.datas.get_number) {
                this.recommandList.splice(this.datas.get_number, this.recommandList.length-this.datas.get_number);
                this.isLoadMore = false;
              }
            }
            if(isLocation) {
              this.locationFun();
            }
          } else {
            this.page = this.page - 1;
            this.isLoadMore = false;
          }
        },
        function(response) {
          console.error(response);
          // error callback
        });
    },
    setListData() { //处理列表数据是自动获取还是手动获取
      if(this.datas?.list?.data) {
        this.total_page = this.datas.list.last_page;
        if(this.total_page <= this.page) {
          this.isLoadMore = false;
        }
        if(this.recommandList.length > this.datas.get_number) { //大于后台控制的数量就显示后台数量列表
          this.recommandList.splice(this.datas.get_number,this.recommandList.length-this.datas.get_number);
          this.isLoadMore = false;
        }
      }else {
        if(this.datas.list.length <= 0) {
          this.isLoadMore = false;
        }
      }
    },
    locationFun() {
      this.page = 1;
      this.fun
      .getLocation()
      .then(res => {
        let p = this.fun.bd_encrypt(res.point.lng, res.point.lat);
        this.point.lng= p.lng;
        this.point.lat= p.lat;
        this.city = (res.city).trim();;
        this.goodsFlag = false;
        console.log('eeeeeeeeeeeeeeeeeeeee')
        this.frontendIndex();
      })
      .catch(err => {
        this.goodsFlag = false;
        this.frontendIndex();
      })
    },
    // 获取更多数据
    getMoreData() {
      this.isLoadMore = false;
      this.goodsFlag = false;
      if (this.page >= this.total_page) {
        return;
      } else {
        this.page = this.page + 1;
        let json = {
          page:this.page,
          city:this.city,
          lng:this.point.lng,
          lat:this.point.lat,
          decorate_id: this.page_id || this.$store.state.temp.item.id,
          component_id: this.id,
          component_key: 'U_yzSupplyCake'
        }
        $http
        .post(
          "home-page.get-decorate-page",
          json,'loading')
        .then((response)=> {
          this.isLoadMore = true;
          if (response.result === 1) {
            let res = response.data;
            let list = [].slice.call(res?.data) || [];
            this.recommandList =this.recommandList.concat(list);//数组拼接
            if(this.datas.get_style == "1") { //装修自动获取
              if(this.recommandList.length > this.datas.get_number) {
                this.recommandList.splice(this.datas.get_number,  this.recommandList.length-this.datas.get_number);
                this.isLoadMore = false;
              }
            }
            if(this.page >= this.total_page) {
              this.isLoadMore = false;
            }
            this.goodsFlag = true;
          } else {
            this.page = this.page - 1;
            this.isLoadMore = false;
          }
        },
        function(response) {
          console.error(response);
          // error callback
        });
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    let myLocation = this.$store.state.o2oLocation;//获取缓存定位信息
    if(!myLocation.point) {
      this.frontendIndex(true);
    } else {
      this.point = myLocation.point;
      if (this.city === "") {
        this.city = myLocation.city;
      }
      this.page = 1;
      console.log('xxxxxxxxxxxxxx')
      this.frontendIndex();
    }
    console.log('组件执行组件执行');
    this.setListData();
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  }
</script>
<style scoped lang="scss">
.loadMore {
  width: 100%;
  height: 50px;
  cursor: pointer;
  line-height: 50px;
  text-align: center;
  clear: both;
}
/* @import url(); 引入公共css类 */
/* 精选品牌 */
.handpick {
  // background-color: #fff;
  padding:0.625rem;
  .handpick-item {
    margin-right: 0.75rem;
    white-space: nowrap;

    img {
      width: 6.25rem;
      height: 6.25rem;
    }
  }
}

.handpick-view_H {
  height: 2.75rem;
  white-space: nowrap;
  flex-direction: row;
}

.handpick-list {
  border-radius: 0.5rem;
  margin-top: 0.5rem;
  padding: 0.75rem;
  background: #fff;
  overflow: hidden;
  // width: 348px;
  // overflow-x: scroll;
  .bandShop {
    margin-top: 0.75rem;
    display: flex;
    justify-content: flex-start;

    .lis {
      display: flex;
      flex-direction: column;
      margin-right: 0.47rem;
      width: 4.75rem;
      overflow: hidden;

      img {
        width: 4.75rem;
        height: 4.75rem;
        border-radius: 0.25rem;
        box-shadow: 0 0 0 rgba(0, 0, 0, 0.1);
      }

      .shopName {
        font-size: 0.75rem;
        color: #333;
        line-height: 1.03rem;
        margin: 0.22rem 0 0.25rem 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .price {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.75rem;
        color: #e32323;
        line-height: 1.03rem;
      }
    }
  }

  .top {
    display: flex;

    .usetPhoto {
      flex-shrink: 0;
      width: 2.5rem;
      height: 2.5rem;
      border-radius: 1.25rem;
      margin-right: 0.25rem;
    }

    .top_right {
      flex: 1;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .bandName {
        font-size: 0.88rem;
        color: #333;
        font-weight: bold;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .localDetail {
        display: flex;
        align-items: center;
        color: #999;
        font-size: 0.75rem;

        img {
          width: 0.75rem;
          height: 0.75rem;
          flex-shrink: 0;
          margin-right: 0.25rem;
        }

        .detail {
          color: #999;
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          margin-right: 0.84rem;
          text-align: left;
        }

        .distance {
          flex-shrink: 0;
        }
      }
    }
  }
}

.handpick .handpick-title,
.activity-head text {
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.4375rem;
  color: #333;
}

.recommend-title {
  padding: 1.25rem 0 0.75rem 0;
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.4375rem;
  color: #333;
}
.handpick-title  p {
  font-size: 14px;
  font-weight: 400;
}
.handpick-title  p span {
  font-size: 14px;
}
.recommend-title img,
.handpick-title img,
.activity-head img {
  width: 1.25rem;
  height: 1.25rem;
  margin-left: 0.125rem;
}

.recommend-list {
  flex-wrap: wrap;
}

.moreTxt {
  text-align: center;
  padding: 1rem 0;
  color: #999;
}
</style>